<template>
    <div class="timeWrap">
        <div class="time">
            <div class="h wTyL">{{ H }}</div>
            <span v-if="H">:</span>
            <div class="m wTyL">{{ M }}</div>
            <span v-if="M">:</span>
            <div class="s wTyL" v-if="S">{{ S }}</div>
        </div>
        <div class="day">
            <div class="y wTyS">{{ y }}</div>
            <span v-if="y">.</span>
            <div class="m wTyS">{{ m }}</div>
            <span v-if="m">.</span>
            <div class="d wTyS">{{ d }}</div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ZSTimes',
    data() {
        return {
            H: '',
            M: '',
            S: '',
            y: '',
            m: '',
            d: '',
            setIntName: null,
        }
    },
    methods: {
        start() {
            this.end();
            this.setIntName = setInterval(() => {
                this.getTimes();
            }, 1000)
        },
        end() {
            clearInterval(this.setIntName);
            this.setIntName = null;
        },
        getTimes() {
            const now = new Date();
            const hours = now.getHours(); // 获取当前小时，例如：15
            const minutes = now.getMinutes(); // 获取当前分钟，例如：30
            const seconds = now.getSeconds(); // 获取当前秒数，例如：45
            const year = now.getFullYear(); // 获取当前年份，例如：2022
            const month = now.getMonth() + 1; // 获取当前月份（注意需要加1，因为月份从0开始），例如：10
            const day = now.getDate(); // 获取当前日期，例如：25
            this.H = hours < 10 ? '0' + hours : hours;
            this.M = minutes < 10 ? '0' + minutes : minutes;
            this.S = seconds < 10 ? '0' + seconds : seconds;
            this.y = year;
            this.m = month < 10 ? '0' + month : month;
            this.d = day < 10 ? '0' + day : day;
        }
    },
    mounted() {
        this.start();
    },
    destroyed() {
        this.end();
    }
}
</script>
<style lang="less" scoped>
.timeWrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: PangMenZhengDao;
    display: flex;
    flex-direction: column;
    align-items: center;

    .time {
        width: 100%;
        font-size: 24px;
        font-weight: 400;
        text-align: right;
        display: flex;
        justify-content: flex-end;
    }

    .day {
        margin-top: -8px;
        font-size: 14px;
        font-weight: 400;
        display: flex;
    }

    .wTyL {
        min-width: 32px;
        text-align: center;
        // width: 33%;
    }

    .wTyS {
        min-width: 8px;
        text-align: right;
    }
}
</style>